<template>
  <a-modal
    :title="title"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;overflow-y: hidden"
    :width="1200"
    :footer="null"
  >
    <a-form :form="form" layout="inline">
      <a-form-item label="名称">
        <a-input placeholder="请输入名称" v-decorator="[ 'name', validatorRules.name]" :disabled="true"></a-input>
      </a-form-item>
 <!--     <a-form-item label="单位">
        <a-input placeholder="请输入单位名称" v-decorator="[ 'company', validatorRules.company]" :disabled="true"></a-input>
      </a-form-item>-->
      <a-form-item label="描述">
        <a-input
          placeholder="请输入描述"
          style="width:400px;"
          v-decorator="[ 'description', validatorRules.description]"
          :disabled="true"
        ></a-input>
      </a-form-item>
    </a-form>
    <bpmn-panel ref="bpmnModeler" :processKey="model.key" style="height:300px;" />
  </a-modal>
</template>

<script>
  import pick from 'lodash.pick'
  import BpmnPanel from '@/components/bpmn/show'
  import { addModel, editModel, getModelSource ,copyTemplate} from '@/api/activiti'

  export default {
    components: {
      BpmnPanel
    },
    data() {
      return {
        title: '任务流程模板预览',
        confirmLoading: false,
        visible: false,
        isEdit: false,
        form: this.$form.createForm(this),
        model: {},
        validatorRules: {
          name: {
            rules: [
              { required: true, message: '请输入名称!' },
              { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
            ]
          },
 /*         company: {
            rules: [
              { required: true, message: '请输入单位名称!' },
              { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
            ]
          },*/
          category: {
            rules: [
              { required: true, message: '请输入类型!' },
              { min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur' }
            ]
          },
          key: {
            rules: [
              { required: true, message: '请输入主键!' },
              { min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur' }
            ]
          },
          description: {

            rules: [
              { required: true, message: '请输入描述信息!' },
              { min: 0, max: 126, message: '长度不超过 126 个字符', trigger: 'blur' }
            ]
          }
        }
      }
    },
    methods: {
      show(obj) {
        this.visible = true
        this.form.resetFields()
        if(obj.metaInfo=='String'){
          obj.description = JSON.parse(obj.metaInfo).description
        }

        this.model = Object.assign({}, obj)
        let that = this
        this.$nextTick(() => {
          that.setValues()
        })
      },
      setValues() {
        const that = this
        this.form.setFieldsValue(pick(this.model, 'name', 'company', 'description'))
        getModelSource(this.model.id).then(res => {
          if (res.success) {
            that.$refs.bpmnModeler.loadDiagram(res.result)
          }
        })
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleCancel() {
        this.close()
      }
    }
  }
</script>